<%@ page import="java.util.Date" %>
<%@ page import="net.sf.jsqlparser.expression.StringValue" %>
<%@ page import="java.text.DateFormat" %>
<%@ page import="tech.aistar.entity.UserLogin" %>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html xmlns>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>商品详情</title>
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/bootstrap.css" type="text/css">
    <%--<script type="text/javascript" src="${path}/js/trading/itemsinfo/jquery1.3.2.js"></script>--%>
    <%--<script src="${path}/js/trading/itemsinfo/jquery-1.4.2.js"></script>--%>
    <%--<script language="javascript">--%>

        <%--$(function () {--%>
            <%--$(".but").click(function () {--%>
                <%--$("#faqbg").css({ display: "block", height: $(document).height() });--%>
                <%--var yscroll = document.documentElement.scrollTop;--%>
                <%--$("#faqdiv").css("top", "100px");--%>
                <%--$("#faqdiv").css("display", "block");--%>
                <%--document.documentElement.scrollTop = 0;--%>
            <%--});--%>
            <%--$(".close").click(function () {--%>
                <%--$("#faqbg").css("display", "none");--%>
                <%--$("#faqdiv").css("display", "none");--%>
            <%--});--%>
        <%--})--%>
    <%--</script>--%>
    <!-- 总导航的样式begin -->
    <style>
        /* 搜索框中样式 */
        .form-control-feedback {
            color: #484848;
            line-height: 46px;
        }

        .row img {
            width: 25px;
            height: 25px;
        }

        /* 导航宽度 */
        .navbar {
            max-height: 80px;
        }

        .navbar-nav>li>a {
            padding-top: 18px;
            height: 60px;
            /* font-size: 18px; */
            /* color:white; */
            color: #484848;
        }

        .navbar-brand {
            padding-top: 8px;
            /* font-size: 18px; */
            height: 60px;
        }

        .navbar-default .navbar-nav>li>a {
            color: #484848;
        }

        .navbar-default .navbar-nav>li>a:hover {
            color: #000;
        }


        /* 下划线动画 */
        .navbar-right li {
            display: inline-block;
            padding: 0 0.8em;
        }

        .navbar-right a {
            position: relative;
            text-decoration: none;
            color: #484848;
            display: block;
            padding: 1.2em 0.8em;
        }

        .nav-underline:before {
            content: "";
            position: absolute;
            bottom: 0;
            width: 0;
            border-bottom: 2px solid #484848;
        }

        .nav-underline:hover:before {
            width: 80%;
        }

        .nav-underline:before {
            -webkit-transition: width 0.5s ease-in-out;
            -moz-transition: width 0.5s ease-in-out;
            -ms-transition: width 0.5s ease-in-out;
            -o-transition: width 0.5s ease-in-out;
            transition: width 0.5s ease-in-out;
        }

        .mynav-underline-active,
        .mynav-underline-active:hover {
            border-bottom: 2px solid #484848;
            text-align: center;
        }

        .navbar-right a {
            /* font-family:'Times New Roman', Times, serif; */
            /* font-weight: bold; */
            font-family: 宋体, sans-serif;
            letter-spacing: 1pt;
            /*字间距离*/
            /* border-bottom : 1px solid #4e5358; 下框线 */
            line-height: 20px;

        }
    </style>
    <!-- 总导航样式end -->
    <%--<style type="text/css">--%>
        <%--body {--%>
            <%--font-family: "宋体";--%>
            <%--font-size: 12px;--%>
            <%--margin: 0;--%>
            <%--padding: 0;--%>
        <%--}--%>

        <%--h1,--%>
        <%--h2,--%>
        <%--h3,--%>
        <%--h4,--%>
        <%--p,--%>
        <%--ul,--%>
        <%--li,--%>
        <%--dl,--%>
        <%--dt,--%>
        <%--dd {--%>
            <%--margin: 0;--%>
            <%--padding: 0;--%>
        <%--}--%>

        <%--input,--%>
        <%--img {--%>
            <%--border: 0;--%>
        <%--}--%>

        <%--li {--%>
            <%--list-style: none;--%>
        <%--}--%>

        <%--a {--%>
            <%--/* color: #666; */--%>
            <%--text-decoration: none;--%>
        <%--}--%>

        <%--a:hover {--%>
            <%--text-decoration: underline;--%>
        <%--}--%>

        <%--.but {--%>
            <%--width: 200px;--%>
            <%--height: 50px;--%>
            <%--font-size: 16px;--%>
            <%--font-weight: bold;--%>
            <%--color: #FFF;--%>
            <%--line-height: 50px;--%>
            <%--background: #F60;--%>
        <%--}--%>

        <%--input.but {--%>
            <%--cursor: pointer;--%>
        <%--}--%>

        <%--#faqbg {--%>
            <%--background-color: #666666;--%>
            <%--position: absolute;--%>
            <%--z-index: 99;--%>
            <%--left: 0;--%>
            <%--top: 0;--%>
            <%--display: none;--%>
            <%--width: 100%;--%>
            <%--height: 1000px;--%>
            <%--opacity: 0.5;--%>
            <%--filter: alpha(opacity=50);--%>
            <%---moz-opacity: 0.5;--%>
        <%--}--%>

        <%--#faqdiv {--%>
            <%--position: absolute;--%>
            <%--width: 560px;--%>
            <%--height: 370px;--%>
            <%--left: 50%;--%>
            <%--top: 50%;--%>
            <%--margin-left: -200px;--%>
            <%--z-index: 100;--%>
            <%--background-color: #fff;--%>
            <%--border: 3px #f60 solid;--%>
        <%--}--%>

        <%--#faqdiv h2 {--%>
            <%--font-size: 18px;--%>
            <%--color: #f60;--%>
            <%--padding: 33px 0 0 78px;--%>
            <%--height: 53px;--%>
            <%--/*background: url(images/sorry.jpg) left bottom no-repeat;*/--%>
        <%--}--%>

        <%--#faqdiv h2 a {--%>
            <%--position: absolute;--%>
            <%--top: 5px;--%>
            <%--right: 5px;--%>
        <%--}--%>

        <%--#faqdiv h3 {--%>
            <%--font-size: 14px;--%>
            <%--color: #000;--%>
            <%--line-height: 30px;--%>
            <%--padding: 0 0 10px 15px;--%>
        <%--}--%>

        <%--.other_list {--%>
            <%--float: left;--%>
            <%--width: 536px;--%>
            <%--padding: 0 12px;--%>
            <%--padding-bottom: 10px;--%>
        <%--}--%>

        <%--.other_list li {--%>
            <%--float: left;--%>
            <%--width: 135px;--%>
            <%--height: 225px;--%>
            <%--padding: 0 8px;--%>
        <%--}--%>

        <%--.other_list li.and {--%>
            <%--width: 23px;--%>
        <%--}--%>

        <%--.other_list li.and img {--%>
            <%--float: left;--%>
            <%--width: 23px;--%>
            <%--height: 22px;--%>
            <%--padding-top: 53px;--%>
            <%--border: 0;--%>
        <%--}--%>

        <%--.other_list li img {--%>
            <%--width: 135px;--%>
            <%--height: 135px;--%>
            <%--border: 1px solid #ccc;--%>
        <%--}--%>

        <%--.other_list li dl {--%>
            <%--width: 135px;--%>
        <%--}--%>

        <%--.other_list li dl dt {--%>
            <%--line-height: 18px;--%>
            <%--padding: 5px 3px;--%>
        <%--}--%>

        <%--.other_list li dl dt a {--%>
            <%--color: #666;--%>
        <%--}--%>

        <%--.other_list li dl dd {--%>
            <%--color: #e4393c;--%>
            <%--font-weight: bold;--%>
        <%--}--%>

        <%--span.font14 {--%>
            <%--font-size: 14px;--%>
        <%--}--%>
    <%--</style>--%>

        <%--<link href="${path}/css/trading/itemsinfo/163css.css" type="text/css" rel="stylesheet">--%>
    <%--<SCRIPT src="${path}/js/trading/itemsinfo/jquery-1.2.6.pack.js" type=text/javascript> </SCRIPT> <SCRIPT--%>
        <%--src="${path}/js/trading/itemsinfo/163css.base.js" type=text/javascript> </SCRIPT> <link rel="stylesheet"--%>
        <%--href="${path}/css/trading/itemsinfo/menu.css" type="text/css" />--%>


    <style type="text/css">
                /*#daohangtiao1{ width:200px;*/
                    /*height: 40px; margin-top:5px; background-color:#fff; margin-left:80px; float:left;}*/
        /*#daohangtiao2{ width:660px; height:100%; background-color:#fff; margin-left:330px; float:left;}*/
        /*#xiazai{ float:left;}*/
        /*#fudongtiao{ margin-top:300px; margin-left:1300px; float:right}*/
                /*!*#nav{ width:100%; height:33px; }*!*/

                 body{margin:0px;}
                 #container{background-color:#FFF; width:100%; }
                 header{ background-color:#FBBF64; height:80px; width:1190px; padding-top:7px; margin:0px auto; margin-top:50px; border-top-left-radius:10px; border-top-right-radius:10px;}
                 article{background-color:#fff;  width:730px; float:left;}
                 aside{background-color:#fff; height:920px; width:445px; margin-left:15px; margin-top:20px; float:left;}
                 /*#foot{ width:1200px;; height:250px; background-color:#323232; margin:0px auto; text-align:center; margin-top:2200px;}*/
                 #part01{margin-top:0px; width:700px;  background-color:#FFf; margin:20px auto;  }
                 #bb:link,#liu:link,#an:link{text-decoration:none; color:#000;}
                 #bb:hover,#liu:hover,#an:hover{font-size:30px; color:#FC0;}
                 /*#gengduo:link{color:#ffcc00; text-decoration:none;}*/
                 /*#ju:link{text-decoration:none;}*/
                 /*#ju:hover{ text-decoration:underline;}*/
                 /*#gengduo:hover{text-decoration:underline;}*/


    </style>
        

        <link href="${path}/css/trading/itemsinfo/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
        <script src="${path}/js/trading/itemsinfo/SpryMenuBar.js" type="text/javascript"></script>


<%--<link href="${path}/Hplus/css/bootstrap.min.css" rel="stylesheet">--%>
<link href="${path}/Hplus/css/font-awesome.min.css" rel="stylesheet">
<link href="${path}/Hplus/css/animate.css" rel="stylesheet">
<link href="${path}/Hplus/css/style.css" rel="stylesheet">
<!-- 轮播 -->
<link type="text/css" rel="stylesheet" href="${path}/css/trading/itemsinfo/css.css">

<script src="${path}/js/trading/itemsinfo/jquery-1.9.1.min.js"></script>
<script src="${path}/js/trading/itemsinfo/index.js"></script>

    <!-- 内容样式 -->
    <style>
        #right-bottom img {
            width: 120px;
            height: 100px;
            position: relative;
            left: 21px;
        }
    </style>
</head>

<body >
    <!-- 总导航begin -->
    <!-- 总导航end -->
    <%@include file="../sharedper/nav.jsp"%>
    <div class="MenuBarActive" id="container">

        <header style=" margin-top:30px;background-color:black;opacity: 0.5;width: 1140px;margin-left: 220px">
            <div style="background-color:black; height:80px;">
                <div style=" height:100%; background-color:black; float:left;">
                    <ul id="MenuBar1" class="MenuBarHorizontal" style=" margin-top:3px;">
                        <li style="width:200px; height:60px; margin-top:3px;margin-left:20px;background-color:black; height:62px;">
                           <img src="${userInfo.picfilename}"  style="width: 40px;height:40px;float:left"/>
                             <h3 style="background-color:black;color:white;float:left;margin-top: 10px">&nbsp;&nbsp;&nbsp;${userInfo.uName}</h3>
                            <%--<li style="position: absolute;z-index:10">--%>
                            <%--<ul style="width:235px;margin-top: 50px;">--%>
                            </li>
                                <li style="width:100px; background-color:black;margin-top: 15px">
                                    <c:if test="${userInfo.uSex==0}">
                                    <span style="color:white;font-size: 16px">男</span>
                                </c:if>
                                    <c:if test="${userInfo.uSex==1}">
                                        <span style="color:white;font-size: 18px">女</span>
                                    </c:if>
                             </li>
                                <li style="width:200px; background-color:black;margin-top: 11px">
                                        <c:if test="${goods.realnameStatus==1}">
                                            <span style="color:white;">该用户已实名!</span>
                                        </c:if>
                                     <c:if test="${goods.realnameStatus==0}">
                                    <span style="color:white;">该用户未实名!请谨慎...</span>
                                     </c:if>
                                     <br>
                                    <span style="color:white;padding-top: 10px">芝麻分：${goods.creditStatus}分</span>
                                    <br>
                                </li>
                            <%--</ul>--%>


                        <li style="margin-left:2px;width:105px;height:62px; margin-top:0px;background-color:black;">
                            <div style=" height:60px; margin-top:12px;"><span
                                    style="color:white;">宝贝浏览次数<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${goods.browse}+</span></div>
                        </li>
                    </ul></div>
                </div>
                <div style=" width:90px; height:40px; float:right; margin-top:-70px;opacity: 0.5">
                    <%--<a id="ju" href="#"--%>
                        <%--style=" color:white;">举报该宝贝</a>--%>
                    <button type="button" onclick="report(${userInfo.uId})" style="background-color:black;color: white">举报
                    </button>
                </div>
            <%--</div>--%>
        </header>
    </div>

    <div >
            <img src="http://pz9i3bxwr.bkt.clouddn.com//11.png" style="width: 60px;height:60px;position:relative;right:600px;top:20px;opacity: 0.5;"/>
            <img src="http://pz9i3bxwr.bkt.clouddn.com//11.png" style="width: 60px;height:60px;position:relative;right:500px;top:50px;opacity: 0.5;"/>
            <img src="http://pz9i3bxwr.bkt.clouddn.com//11.png" style="width: 60px;height:60px;position:relative;right:400px;top:20px;opacity: 0.5;"/>
            <img src="http://pz9i3bxwr.bkt.clouddn.com//11.png" style="width: 60px;height:60px;position:relative;right:300px;top:50px;opacity: 0.5;"/>
            <img src="http://pz9i3bxwr.bkt.clouddn.com//11.png" style="width: 60px;height:60px;position:relative;right:200px;top:20px;opacity: 0.5;"/>
            <img src="http://pz9i3bxwr.bkt.clouddn.com//11.png" style="width: 60px;height:60px;position:relative;right:100px;top:50px;opacity: 0.5;"/>
            <img src="http://pz9i3bxwr.bkt.clouddn.com//11.png" style="width: 60px;height:60px;position:relative;right:0px;top:20px;opacity: 0.5;"/>
        </div>
    <!--mini聊天窗口开始-->
    <div class="small-chat-box fadeInRight animated" style="top: 100px">

            <div class="heading" draggable="true">
                <small class="chat-date pull-right">
                </small> 与  <span style="color: #a94442">${userInfo.uName}</span>  卖家 聊天中
            </div>

            <div class="content" style="color: green">
                <div id="console">
                </div>

            </div>
            <div class="form-chat">
                <div class="input-group input-group-sm" style="width: 250px">
                    <%--<input type="text" class="form-control1" >--%>
                        <input type="text" placeholder="请输入内容" id="chat" style="width: 250px"/>
                    <%--<span class="input-group-btn" style="margin-top: -28px;">--%>
                        <%--<button class="btn btn-primary" onclick="myFunction()"--%>
                            <%--type="button" style="background: black">发送--%>
                        <%--</button> </span>--%>
                </div>
            </div>
        <script type="text/javascript">
            var Console = {};
            var mess={};
            var userList=[];

//            var senderId=prompt("请输入你的账号");
            var senderId=${user.id};//买家id,也就是当前用户id
                <%
                    UserLogin user1=(UserLogin) session.getAttribute("user");
                    session.setAttribute("user1",user1);
                    Integer buyid=user1.getId();
                    session.setAttribute("buyid",buyid);
                %>
            Console.log = (function(message) {
                var console = document.getElementById('console');
                var p = document.createElement('p');
                p.style.wordWrap = 'break-word';
                p.innerHTML = message;
                console.appendChild(p);
                while (console.childNodes.length > 25) {
                    console.removeChild(console.firstChild);
                }
                console.scrollTop = console.scrollHeight;
            });
            var Chat = {};
            Chat.socket = null;
            Chat.connect = (function(host) {
                if ('WebSocket' in window) {
                    Chat.socket = new WebSocket(host);
                } else if ('MozWebSocket' in window) {
                    Chat.socket = new MozWebSocket(host);
                } else {
                    Console.log('错误');
                    return;
                }

                Chat.socket.onopen = function() {
                    Console.log('<span style="color: #e4393c;margin-left: 30px">信息通畅,请放心交流</span>');
                    document.getElementById('chat').onkeydown = function(event) {
                        if (event.keyCode == 13) {
                            Chat.sendMessage();
                        }
                    };
                    function myFunction(event) {
                            if (event.keyCode == 13) {
                                Chat.sendMessage();
                            }
                        }
                };

                Chat.socket.onclose = function() {
                    document.getElementById('chat').onkeydown = null;

                    Console.log('<span style="color: red;margin-left: 30px">信号中断,对话停止</span>');
                };

                Chat.socket.onmessage = function(message) {
                    Console.log(message.data);
                };
            });

            Chat.initialize = function() {
                Chat.connect('ws://localhost:8081/PetForums/webSocket/'+senderId);
            };

            Chat.sendMessage = (function() {
               var str="";
                str+="<img src='${info.picfilename}' width='40px' heigth='40px'/>&nbsp;&nbsp;";
                var message =str+document.getElementById('chat').value;

//                var receiverIds=prompt("请输入接收者账号用逗号分隔");

                var receiverIds=${userInfo.id}+",";

//                if(receiverIds!=null){
//
//                    HttpSession session=request.getSession();
//                    session.setAttribute("username",session);
//                }
                userList=receiverIds.split(",");

                mess.userList=userList;

                mess.mess=message;

                var strmee=JSON.stringify(mess);

                if (message != '') {
                    //发送
                    Chat.socket.send(strmee);
                    //清空输入框
                    document.getElementById('chat').value='';

                }
            });

            Chat.initialize();
        </script>

        </div>
        <div id="small-chat" style="position:relative;top: 330px;left: 915px">
            <!-- <span class="badge badge-warning pull-right">5</span> -->
            <a class="open-small-chat" style="background-color: #F99B46;width:200px;height:50px;border-radius: 0%">
                <!-- <i class="fa fa-comments"></i> -->
                <h3 style="color: white">聊一聊</h3>
            </a>
        </div>
        <!--mini聊天窗口结束-->
        <div style="width:1190px; margin:0px auto;">
            <article style="height: 4000px">
                <!-- 轮播 start-->
                <!-- <div class="box"> -->
                        <!-- 存放大图的容器-->
                        <div class="all" style="position: relative;top:-30px;">
                            <div class="top-img">
                                <div class="activeimg">
                                    <%--<img src="${path}/imgs/trading/itemsinfo/p1.jpg" >--%>
                                    <%--<img src="${path}/imgs/trading/itemsinfo/3.jpg" >--%>
                                    <%--<img src="${path}/imgs/trading/itemsinfo/4.jpg" >--%>
                                    <%--<img src="${path}/imgs/trading/itemsinfo/5.jpg" >--%>
                                    <c:forEach items="${imgStoragesList}" begin="4" end="7" var="a">
                                        <img src="${a.address}">
                                    </c:forEach>
                                    <!-- <img src="../../imgs/trading/itemsinfo/p1.jpg"> -->
                                </div>
                                <div class="left"><img src="${path}/imgs/trading/itemsinfo/left.png"> </div>
                                <div class="right"><img src="${path}/imgs/trading/itemsinfo/right.png"></div>
                            </div>
                            <!-- 存放缩略图的容器-->
                            <div class="bot-img">
                                <ul>
                                    <%--<li class="active" style="height: 90px">--%>
                                        <%--<img src="${path}/imgs/trading/itemsinfo/p1.jpg"> </li>--%>
                                    <%--<li><img src="${path}/imgs/trading/itemsinfo/3.jpg"> </li>--%>
                                    <%--<li><img src="${path}/imgs/trading/itemsinfo/4.jpg"> </li>--%>
                                    <%--<li><img src="${path}/imgs/trading/itemsinfo/5.jpg"> </li>--%>
                                    <!-- <li><img src="../../imgs/trading/itemsinfo/p1.jpg"> </li> -->

                                    <c:forEach items="${imgStoragesList}" begin="4" end="7" var="i">
                                        <li  class="active" style="height: 90px"><img src="${i.address}"> </li>
                                    </c:forEach>
                                </ul>
                            </div>
                        </div>
                    <!-- </div> -->
                    
                <!-- 轮播 end -->
                    <div
                    style="margin-left:20px; height:35px; background-color:#ffcc33; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:6px;"
                    id="dao">
                    <div style="background-color:#FFF; margin-left:10px;">
                    <a id="bb"  href="#baobei" style="font-size:20px;font-weight: bold">宝贝介绍&nbsp;</a>
                    <!-- <a id="an" href="#anquan" style="font-size:20px;">安全保障</a>--><br> 
     </div>
    </div>
                <span style="font-size:9px;color:#333333; margin-left:20px;font-weight: bold">&nbsp;&nbsp;如遇到以下情况可能是诈骗行为：</span>
                <span style="color:#F00; font-size:9px;">1.宝贝价格异常低；2.卖家要求QQ沟通；3.卖家要求直接汇款。</span> 
                <span style="font-size:9px;">寻求防骗经验。</span>
                                                       
                    <div id="part0" style="margin-left: 20px">
                         
                              <span style="font-size:24px; color:#000;font-weight: bold"><a name="baobei">&nbsp;&nbsp;宝贝介绍</a></span><br><br>
                              
                              
                              <p><span style="font-size:15px;color:#949494; font-family:'新宋体';font-weight: bold">
                                    <table>
                                    <tr>
                                    <td>&nbsp;&nbsp;品 牌: ${goodsDetails.brand}</td>
                                    <td>&nbsp;&nbsp;&nbsp;&nbsp;品 名: ${goods.goodsName}</td>
                                    <td>&nbsp;&nbsp;&nbsp;&nbsp;分 类: ${goodsDetails.type}</td>
                                </tr>
                                    <tr>
                                        <td>&nbsp;&nbsp;适用犬 品种: ${goodsDetails.varieties}</td>
                                        <td>&nbsp;&nbsp;&nbsp;&nbsp;重 量(g): ${goodsDetails.weight}</td>
                                        <td>&nbsp;&nbsp;&nbsp;&nbsp;适用 阶段: ${goodsDetails.applyPhase}</td>
                                </tr>
                                    <tr>
                                        <td>&nbsp;&nbsp;剩余 保质期: ${goodsDetails.remainTime}</td>
                                        <td>&nbsp;&nbsp;&nbsp;&nbsp;适用犬 体型: ${goodsDetails.applySize}</td>
                                        <td>&nbsp;&nbsp;&nbsp;&nbsp;食品 口味: ${goodsDetails.taste}</td>
                                </tr>
                                    <tr>
                                        <td>&nbsp;&nbsp;原 产 地: ${goodsDetails.originPlace}</td>
                                        <td>&nbsp;&nbsp;&nbsp;&nbsp;生产 厂家 地址: ${goodsDetails.manufacturerAddress}</td>
                                        <td>&nbsp;&nbsp;&nbsp;&nbsp;生产 厂家 名称: ${goodsDetails.manufacturerName}</td>
                                </tr>
                                    <%--<tr><td>&nbsp;&nbsp;适用 犬种: 全犬种 其他 吉娃娃 哈士奇</td></tr>--%>
                                </table></span></p>
                              <%--<img src="${path}/imgs/trading/itemsinfo/6.png" width="700"/><br><br>--%>
                              <%--<img src="${path}/imgs/trading/itemsinfo/7.png" width="700"/><br><br>--%>
                              <%--<img src="${path}/imgs/trading/itemsinfo/8.png" width="700"/><br><br>--%>
                              <%--<img src="${path}/imgs/trading/itemsinfo/9.png" width="700"/><br><br>--%>
                        <c:forEach items="${imgStoragesList}" begin="0" end="3" var="i">
                            <img src="${i.address}" width="700"/><br><br>
                        </c:forEach>

                                                        
                    </div>
                <div class=" foot" style="background-color: #beebff">
                    <div class="foot-inner" style="background-color:#beebff">
                        <div class="container" style="background-color:#beebff">
                            <div class="row">
                                <div class="col-md">
                                    <div class="col-md-4 foot-text" style="margin-top: 10px">
                                        <b>关于我们</b>
                                        <div style="margin-top:20px;">
                                            <p>加入社区 让养宠更快乐</p>
                                        </div>
                                        <div style="margin-top:20px;">
                                            <p>@suzhouchixing有限公司 版权所有</p>
                                        </div>

                                    </div>
                                    <div class="col-md-4 foot-text" style="margin-top: 10px">
                                        <b>联系我们</b>
                                        <div style="margin-top:20px;">
                                            <i class="glyphicon glyphicon-earphone"></i>
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            服务专线:400 054 3033
                                        </div>
                                        <div style="margin-top:20px;">
                                            <i class="glyphicon glyphicon-envelope"></i>
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            suzhou@.com
                                        </div>
                                        <div style="margin-top:20px;">
                                            <i class="glyphicon glyphicon-map-marker"></i>
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            苏州市
                                            工业园区星湖街天使大厦36号
                                        </div>
                                        <div style="margin-top:20px;">
                                            <i class="glyphicon glyphicon-time"></i>
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            Monday - Friday, 9am - 6 pm;
                                        </div>

                                    </div>
                                    <div class="col-md-4 foot-text" style="margin-top: 10px">
                                        <b>关注我们</b>
                                        <div style="margin-top:20px;">
                                            <%--<img src="../imgs/index/timg.jpg" style="width: 250px;height:250px;">--%>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </article>

                    
           <aside style="height: 500px">
                        <div style="height:70px; background-color:#FFF; ">
                            <span><h2 style="font-size: 20px;font-weight:bold">${goods.goodsDetails}</h2></span>
                            <p><span style="color:#333333;">&nbsp;&nbsp;&nbsp;价  格：</span><span style="color:#CCC;">&yen;</span><span style="color:#f00; font-size:25px;font-weight:bold"><b>${goods.price}</b></span></p>
                        </div>
                         <div  style="background-color:#FFF; height:330px; margin-top:25px">
                            <p><span style="color:#333333;">&nbsp;&nbsp;&nbsp;成 色：${goods.degree}</span></p>
                            <p><span style="color:#333333;">&nbsp;&nbsp;&nbsp;所  在  地：${goods.place}</span></p>
                            <p><span style="color:#333333;">&nbsp;&nbsp;&nbsp;交易方式: 邮寄  /  同城自取</span></p>
                             <p style="margin-top: 20px"><span style="color:#333333;">&nbsp;&nbsp;&nbsp;联系方式：</span>

                             </p>
                                <input  class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" type="image" src="${path}/imgs/trading/itemsinfo/item2.jpg"
                                style="padding:2px 8px;background:#FFF;border-color: #FFF; width: 100px;height:40px;position: relative;top: -40px;left: 70px"/>
                             <button type="button"  id="collect" style="position: relative;left:120px;top:60px;font-weight: bold;background-color: white;
                                width: 50px;border: white;color: tomato;font-size: 18px">收藏</button>
                          <br>
                        
                          <br>
                            <img src="${path}/imgs/trading/itemsinfo/item1.png"
                            style="width: 430px;height: 150px;margin-top: 0px;position: relative;top: 30px;left: -15px"
                            />
                           
                      </div>
           </aside>
            <!-- 二维码模态框（Modal） -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog" style="padding-right: 30px">
                    <div class="modal-content">
                        <div class="modal-body">
                            <img src="${userInfo.zfbImg}" style="width: 500px;height:550px"/>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 模态框结束 -->
                <%--商品推荐--%>
            <%--<div style="height:265px; margin-top:60px;">--%>
                <table width="445"  height="265";border="1px" style="margin-top: -20px">
                    <tr style="border: none;margin-top: 50px">
                        <td >
                            <span>
                            <h2 style="position:relative;left: 20px;font-weight: bold;padding: 0px">商品推荐
                                </h2>
                            </span>
                        </td>
                    </tr>
                    <tr style="border: none">
                        <td>
                            <%--<%  Integer goodsTypeId=1;--%>
                                <%--pageContext.setAttribute("goodsTypeId",goodsTypeId);%>--%>
                            <c:if test="${goodsTypeId==1}">

                                <c:forEach items="${goods1}" var="g" end="3">
                                <%--<c:if test="${g.goodsTypeId==1}">--%>
                                <div style="height: 163.2px;margin-left: 30px;margin-top: 15px">
                                <img src="${g.goodsPicture}" alt="history" style="float:left;width: 90px;height: 90px;margin-top: 15px" />
                                <div style="float:left">
                                    <a href="${path}/goodsDetails/list?id=${g.id}">
                                        <h5 style="font-weight:bold">${g.goodsName}</h5>
                                        <div style="width: 70%">
                                            <p style="font-weight:bold">${g.goodsDetails}</p>
                                        </div>
                                    </a>
                                    <p style="text-align: left;color:red;font-size: 20px;">
                                        ¥${g.price}</p>
                                </div>
                                </div>
                                <%--</c:if>--%>
                                </c:forEach>
                                        </c:if>

                                <c:if test="${goodsTypeId==2}">

                                    <c:forEach items="${goods1}" var="g" begin="7" end="9" >
                                        <%--<c:if test="${g.goodsTypeId==2}">--%>
                                            <div style="height: 163.2px;margin-left: 30px;margin-top: 15px">
                                                <img src="${g.goodsPicture}" alt="history" style="float:left;width: 90px;height: 90px;margin-top: 15px" />
                                                <div style="float:left">
                                                    <a href="${path}/goodsDetails/list?id=${g.id}">
                                                        <h5 style="font-weight:bold">${g.goodsName}</h5>
                                                        <div style="width: 70%">
                                                            <p style="font-weight:bold">${g.goodsDetails}</p>
                                                        </div>
                                                    </a>
                                                    <p style="text-align: left;color:red;font-size: 20px;">
                                                        ¥${g.price}</p>
                                                </div>
                                            </div>
                                        <%--</c:if>--%>
                                    </c:forEach>

                                </c:if>

                                <c:if test="${goodsTypeId==3}">

                                    <c:forEach items="${goods1}" var="g" begin="12" end="15" >
                                        <%--<c:if test="${g.goodsTypeId==3}">--%>
                                            <div style="height: 163.2px;margin-left: 30px;margin-top: 15px">
                                                <img src="${g.goodsPicture}" alt="history" style="float:left;width: 90px;height: 90px;margin-top: 15px" />
                                                <div style="float:left">
                                                    <a href="${path}/goodsDetails/list?id=${g.id}">
                                                        <h5 style="font-weight:bold">${g.goodsName}</h5>
                                                        <div style="width: 70%">
                                                            <p style="font-weight:bold">${g.goodsDetails}</p>
                                                        </div>
                                                    </a>
                                                    <p style="text-align: left;color:red;font-size: 20px;">
                                                        ¥${g.price}</p>
                                                </div>
                                            </div>
                                        <%--</c:if>--%>
                                    </c:forEach>
                                </c:if>

                                <c:if test="${goodsTypeId==4}">

                                    <c:forEach items="${goods1}" var="g" begin="18" end="21" >
                                        <%--<c:if test="${g.goodsTypeId==4}">--%>
                                            <div style="height: 163.2px;margin-left: 30px;margin-top: 15px">
                                                <img src="${g.goodsPicture}" alt="history" style="float:left;width: 90px;height: 90px;margin-top: 15px" />
                                                <div style="float:left">
                                                    <a href="${path}/goodsDetails/list?id=${g.id}">
                                                        <h5 style="font-weight:bold">${g.goodsName}</h5>
                                                        <div style="width: 70%">
                                                            <p style="font-weight:bold">${g.goodsDetails}</p>
                                                        </div>
                                                    </a>
                                                    <p style="text-align: left;color:red;font-size: 20px;">
                                                        ¥${g.price}</p>
                                                </div>
                                            </div>
                                        <%--</c:if>--%>
                                    </c:forEach>
                                </c:if>

                        </td>

                    </tr>

                </table>
            <%--</div>--%>

     <script src="${path}/plugins/jquery/jquery.min.js"></script>

                <script src="${path}/plugins/bootstrap/js/bootstrap.js"></script>

                <script>
                    $(document).ready(function () {
                        $("#search").focus(function () {
                            $(this).css("padding-right", "180.5px")
                        });
                        $("#search").blur(function () {
                            $(this).css("padding-right", "42.5px")
                        });
                    });

                </script>
                <%--<script type="text/javascript">--%>
                    <%--var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", { imgDown: "SpryAssets/SpryMenuBarDownHover.gif", imgRight: "SpryAssets/SpryMenuBarRightHover.gif" });--%>

                <%--</script>--%>



    <script src="${path}/Hplus/js/jquery.min.js"></script>
    <%--<script src="${path}/Hplus/js/bootstrap.min.js"></script>--%>
    <script src="${path}/Hplus/js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="${path}/Hplus/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="${path}/Hplus/js/plugins/layer/layer.min.js"></script>

    <script src="${path}/Hplus/js/hplus.js"></script>
    <script type="text/javascript" src="${path}/Hplus/js/contabs.js"></script>

    <script src="${path}/Hplus/js/plugins/pace/pace.min.js"></script>

    <script>
        function report(uId){
            $.post("${path}/goodsDetails/report",{uId:uId},function(data){
                if (data=="可举报"){
                    alert("已提交举报申请,待核实.......");
                }
                if (data=="未登录"){
                    alert("请先登录!");
                }
            });
        }
    </script>
    <script>
        $("#collect").click(function () {
            $.post("${path}/goodsDetails/collection",
                {
                    uId:${userInfo.id},
                    kindId:${goods.id}
                }, function (data) {
                if (data=="可收藏"){
                    alert("收藏成功!");
                }
                 if (data=="未登录"){
                    alert("请先登录!");
                 }
                }
            )
        });
    </script>


</body>
</html>